<template>
  <div>
    <h1>el-dialog 拖拽放大以及el-table自适应</h1>
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      v-dialogDrag
    >
      <div class="container">
        <div class="header" :class="{ large: large }" @click="toggle">
          页面头部,高度{{ large ? 200 : 100 }}px
        </div>
        <div class="main">
          <div class="table-wrap">
            <el-table :data="tableData" height="100%">
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      large: false,
      dialogVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {
    for (let i = 0; i < 3; i++) {
      this.tableData.push({
        date: "2016-05-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1516 弄",
      });
    }
  },
  methods: {
    toggle() {
      this.large = !this.large;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  padding-top: 50px;
  padding-bottom: 50px;
  .el-dialog__header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .el-dialog__body {
    // height: calc(100% - 100px);
    height: 100%;
  }
  .el-dialog__footer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.container {
  font-size: 20px;
  height: 100%;
  // height: 500px;
  display: flex;
  flex-direction: column;
  .header {
    height: 100px;
    background: lightcoral;
    flex-shrink: 0;
    &.large {
      height: 200px;
    }
  }
  .main {
    flex: auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .table-wrap {
    max-height: 100%;
    flex: auto;
  }
}
</style>
